<template>
	<div class="loadding_box">
		<div class='loader'>
			<div class='loader--dot'></div>
			<div class='loader--dot'></div>
			<div class='loader--dot'></div>
			<div class='loader--dot'></div>
			<div class='loader--dot'></div>
			<div class='loader--dot'></div>
			<div class='loader--text'></div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {};
		},
		watch: {},
		computed: {},
		created() {},
		mounted() {},
		methods: {},
	};
</script>


<style lang="scss" scoped>
	.loadding_box {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9;
	}

	.loader {
		height: 20px;
		width: 250px;
		position: relative;
	}

	.loader--dot {
		animation-name: loader;
		animation-timing-function: ease-in-out;
		animation-duration: 3s;
		animation-iteration-count: infinite;
		height: 20px;
		width: 20px;
		border-radius: 100%;
		background-color: black;
		position: absolute;
		/* border: 2px solid white; */
	}

	.loader--dot:first-child {
		background-color: #8cc759;
		animation-delay: 0.5s;
	}

	.loader--dot:nth-child(2) {
		background-color: #8c6daf;
		animation-delay: 0.4s;
	}

	.loader--dot:nth-child(3) {
		background-color: #ef5d74;
		animation-delay: 0.3s;
	}

	.loader--dot:nth-child(4) {
		background-color: #f9a74b;
		animation-delay: 0.2s;
	}

	.loader--dot:nth-child(5) {
		background-color: #60beeb;
		animation-delay: 0.1s;
	}

	.loader--dot:nth-child(6) {
		background-color: #fbef5a;
		animation-delay: 0s;
	}

	.loader--text {
		position: absolute;
		top: 200%;
		left: 0;
		right: 0;
		color: #fff;
		/* width: 4rem; */
		margin: auto;
		font-size: 18px;
		/* text-align: center; */
	}

	.loader--text:after {
		content: "Loading";
		font-weight: bold;
		animation-name: loading-text;
		animation-duration: 5s;
		animation-iteration-count: infinite;
	}

	@keyframes loader {
		15% {
			transform: translateX(0);
		}

		45% {
			transform: translateX(230px);
		}

		65% {
			transform: translateX(230px);
		}

		95% {
			transform: translateX(0);
		}
	}

	@keyframes loading-text {
		0% {
			content: "Loading";
			/* color: #60beeb; */
		}

		25% {
			content: "Loading.";
			/* color: red; */
		}

		50% {
			content: "Loading..";
			/* color: blue; */
		}

		75% {
			content: "Loading...";
			/* color: yellow; */
		}
	}
</style>
